<template>
  <div id="edit-user-name-page" class="edit-uesr-name-box">
    <mobileNavbar :name="$t('message.mobileRouter.changeNick')" @back="handleBack" ref="navbar"></mobileNavbar>
    <div class="origin-name-box">{{$t('message.mobile.originName')}}：{{userInfo.realName}}</div>
    <div class="name-tips">{{$t('message.mobile.editNameTips')}}</div>
    <div class="name-input-box">
      <el-input v-model="newUserName" :placeholder="$t('message.placeholder.pleaseNewName')" maxlength="16"  @keyup.enter="handleSubmit"></el-input>
    </div>
    <div class="button-box" :class="[!newUserName && 'button-disable']" @click="handleSubmit">
      {{$t('message.buttons.submit')}}
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileNavbar from './mobileNavbar.vue';
import useUserInfoStore from '@/store/userInfo'
const userStore = useUserInfoStore()
import { getStore } from '@/utils/store.js'
import { getUserInfo,editUser } from "@/api/user"
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({

})

const newUserName = ref('')
const userInfo = ref({})
const userStroe = ref(null)
const navbar = ref()
onMounted(()=>{
  userInfo.value = getStore({name:'userInfo'}) || {tenant:{}}
})

function handleSubmit(){
  if(!newUserName.value) return
  if(userInfo.value.realName==newUserName.value){
    navbar.value.back()
  }else{
    editUser(Object.assign({},userInfo.value,{realName:newUserName.value,sex:null})).then(res =>{
      if(res.data && res.data.code == 0) {
        changeVal()
      }
    })
  }
}
function changeVal(){
  proxy.$mobileMessage({
    type:"success",
    text:$t('message.message.editSuccess')
  })
  getUserInfo()
  freshToken(userStore.tenantId)
}
// 刷新token
function freshToken (id) {
  userStore.refreshToken(id).then(res=>{
    window.parent.postMessage({command: 'fresh'}, '*')
  }).catch(e=>{
    userStore.LogOut().then(() => {
      router.push({ path: "/mobile/login" });
      window.parent.postMessage({command: 'loginOut'}, '*')
    })
  })
}
// 用户信息
function getUserInfo () {
  getUserInfo().then(res => {
    if(res.data.code == 0) {
      userInfo.value = res.data.data
      userStore.setUserInfo(Object.assign(userInfo.value,res.data.data))
      navbar.value.back()
    }
  })
}
function handleBack(val){
  router.push(val)
}

</script>
<style lang="scss" scoped>
.edit-uesr-name-box{
  .origin-name-box{
    margin-top: 1rem;
    padding: 0rem .9375rem;
    @include SourceHanSansCN-Medium;
    font-size: 1rem;
    color: #363B4C;
  }
  .name-tips{
    padding: 0rem .9375rem;
    @include SourceHanSansCN-Regular;
    font-size: .875rem;
    color: #6f7588;
    margin-top: .5rem;
    margin-bottom:1.375rem;
  }
  .name-input-box{
    margin: 0rem .9375rem;
    height: 3rem;
    background: #F5F6F7;
    border-radius: .375rem;
    opacity: 1;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep(.el-input){
      .el-input__wrapper{
        border:none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        &::-webkit-input-placeholder{
          font-size: .875rem;
          color: #6f7588;
          @include SourceHanSansCN-Regular;
        }
      }
    }
  }
  .button-box{
    margin: 0rem .9375rem;
    height: 3rem;
    background: #1E6FFF;
    border-radius: .375rem;
    overflow: hidden;
    font-size: .875rem;
    @include SourceHanSansCN-Medium;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .0625rem;
  }
  .button-disable{
    background: #8EB7FF;
  }
}
</style>